<template>
  <div>
    <div>
      <span>欢迎来到管理教师账号模块</span>
      <el-divider></el-divider>
    </div>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 作业列表 -->
      <!-- border加边框 -->
      <!-- stripe隔行变色 -->

      <div class="content">
        <div>
          <span>教师账号:</span>
          <el-input v-model="teacher.id" placeholder="请输入教师账号"></el-input>
        </div>

        <div>
          <span>教师真实姓名:</span>
          <el-input v-model="teacher.realName" placeholder="请输入姓名"></el-input>
        </div>

        <div>
          <span>教师密码:</span>
          <el-input v-model="teacher.pwd" placeholder="请输入密码" type="password"></el-input>
        </div>

        <el-button type="success" size="mini" @click="addUser()">添加新账号</el-button>
      </div>

      <el-table :data="teacherlist" style="width: 100%">
        <el-table-column label="账号" prop="userName"></el-table-column>
        <el-table-column label="姓名" prop="realName"></el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
        <el-table-column align="left">
          <template slot-scope="scope">
            <el-button type="success" @click="Delete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>-->
    </el-card>
  </div>
</template>


<script>
import { async } from 'q'
export default {
  data() {
    return {
      queryinfo: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      teacherlist: [],
      total: 0,
      teacher: {
        id: '',
        pwd: '',
        realName: ''
      }
    }
  },

  created() {
    this.getTeacherList()
  },

  methods: {
    // 获取所有列表
    async getTeacherList() {
      const { data: res } = await this.$http.get(
        'user/getUserList?roleName=TEACHER'
      )
      if (res.code !== 200) return this.$message.error(res.message)
      this.teacherlist = res.data

      // 后端是根据status判断是否删除了的
      this.teacherlist = this.teacherlist.filter(function(item, index) {
        //index是索引
        return item.status == 0
      })
    },

    // 删除
    async Delete(index, row) {
      console.log(row)
      const { data: res } = await this.$http.delete(
        'user/deleteUser/' + row.id
      )
      if (res.code !== 200) return this.$message.error(res.message)
      this.$message.success("删除成功")
      this.getTeacherList()
    },

    // 添加
    async addUser() {
      if (this.teacher.id == '' || this.teacher.pwd == '') {
        return this.$message.error("请填入正确信息！")
      }
      const { data: res } = await this.$http({
        method: 'post',
        url: 'user/addUser',
        data: {
          password: this.teacher.pwd,
          realName: this.teacher.realName,
          roleName: 'TEACHER',
          userName: this.teacher.id
        }
      })
      if (res.code !== 200) return this.$message.error(res.message)
      this.$message.success('添加成功')
      this.getTeacherList()
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  justify-content: space-between;
  div {
    display: flex;
    margin-right: 10px;
    span {
      white-space: nowrap;
      margin-top: 9px;
      margin-right: 20px;
    }
  }
}
</style>